<template>
    <div class="register">
        <div class="register_from">
            <van-form>
                <van-field label="昵称" input-align="right" placeholder="请输入昵称" v-model="NickName" />
                <van-field v-model="GenderName" input-align="right" is-link readonly label="性别"
                    @click="showPicker = true" />
                <van-popup v-model:show="showPicker" round position="bottom">
                    <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
                </van-popup>
                <!-- <van-field label="身份证" input-align="right" placeholder="请输入身份证" v-model="CardID" /> -->
                <van-field label="手机号" input-align="right" type="tel" placeholder="请输入手机号" v-model="Phone" />
                <van-field label="邀请码" label-width="120" input-align="right" placeholder="请输入邀请码"
                    :readonly="Code ? true : false" v-model="ParentInviteCodeCode" />
                <!-- <van-field label="收货地址" input-align="right" placeholder="请输入收货地址" v-model="Address" /> -->
                <!-- <van-field label="交易支付宝账号" label-width="120" input-align="right" placeholder="请输入交易支付宝账号"
                    v-model="AliPayAccount1" /> -->
                <van-field label="登录密码" input-align="right" type="password" placeholder="请输入登录密码" v-model="Password" />
                <van-field label="交易密码" input-align="right" type="password" placeholder="请输入交易密码" v-model="Security" />
                <van-field label="确认交易密码" label-width="120" type="password" input-align="right" placeholder="请确认交易密码"
                    v-model="IsSecurity" />
            </van-form>
        </div>
        <div class="register_submit">
            <van-button block type="primary" class="btn1" @click="onSubmit"> 立即注册 </van-button>
            <br />
            <van-button block type="primary" class="btn2" @click="goLogin()"> 已有账号 , 去登录
            </van-button>
        </div>
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { Toast, Notify } from 'vant';
import { useStore } from "vuex"; // ⚪️ 引入状态管理
import { useRoute, useRouter } from "vue-router";
import { isPhone, isCardID } from "@/utils/validate";
import router from "@/router";
export default {
    setup() {
        const store = useStore(); // 获取对象
        const route = useRoute();
        const { Code } = route.query;
        const user = reactive({
            Code: Code,
            NickName: "",
            Gender: 1,
            GenderName: '男',
            CardID: '',
            Phone: '',
            ParentInviteCodeCode: Code || '',
            Address: '',
            AliPayAccount1: '',
            Password: '',
            Security: '',
            IsSecurity: '',
        });
        const onSubmit = async () => {
            if (user.NickName == '') {
                Notify({ type: 'warning', message: '请输入昵称' });
                return false
            }
            // if (user.CardID == '') {
            //     Notify({ type: 'warning', message: '请输入身份证号码' });
            //     return false
            // }
            // if (!isCardID(user.CardID)) {
            //     user.CardID = '';
            //     Notify({ type: 'warning', message: '身份证号码不正确，请重新输入' });
            //     return false
            // }
            if (user.Phone == '') {
                Notify({ type: 'warning', message: '请输入手机号码' });
                return false
            }
            if (!isPhone(user.Phone)) {
                user.Phone = '';
                Notify({ type: 'warning', message: '手机号码不正确，请重新输入' });
                return false
            }
            // if (user.ParentInviteCodeCode == '') {
            //     Notify({ type: 'warning', message: '请输入邀请码' });
            //     return false
            // }
            // if (user.Address == '') {
            //     Notify({ type: 'warning', message: '请输入收货地址' });
            //     return false
            // }
            // if (user.AliPayAccount1 == '') {
            //     Notify({ type: 'warning', message: '请输入交易支付宝账号' });
            //     return false
            // }
            if (user.Password == '') {
                Notify({ type: 'warning', message: '请输入登录密码' });
                return false
            }
            if (user.Security == '') {
                Notify({ type: 'warning', message: '请输入交易密码' });
                return false
            }
            if (user.IsSecurity != user.Security) {
                Notify({ type: 'warning', message: '交易密码不一致' });
                return false
            }
            const toast = Toast.loading({
                duration: 0,
                forbidClick: true,
                message: '用户注册中...',
            });
            // 调用action的注册方法
            store.dispatch("CreateUser", user).then(() => {
                toast.clear()
                if (window.indexOfApp == true) {
                    router.push({ path: "/home" });
                } else {
                    if (Code) {
                        router.push({ path: "/download" });
                    } else {
                        router.push({ path: "/login" });
                    }
                }
            }).catch(() => {
                toast.clear()
            });
        };
        const goLogin = () => {
            router.push({ path: "/login" });
        };
        const columns = [
            { text: '男', value: 1 },
            { text: '女', value: 2 },
        ];
        const showPicker = ref(false);

        const onConfirm = (value) => {
            showPicker.value = false;
            user.Gender = value.value;
            user.GenderName = value.text;
        };
        return {
            ...toRefs(user),
            onSubmit,
            columns,
            onConfirm,
            showPicker,
            goLogin,

        };
    },
};
</script>

<style scoped></style>